<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :inline="true" :model="searchForm">
			<el-form-item label="地区名称">
				<el-input placeholder="地区名称" v-model="searchForm.regionName" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table :data="dataList" minheight="calc(100VH - 270px)"
		highlight-current-row border style="width: 100%" v-loading="loading"
		:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
		:load="load"
		row-key="id">
		<el-table-column label="" align="left" width="60px"></el-table-column>
			<el-table-column label="地区名称" prop="regionName" align="center" ></el-table-column>
			<el-table-column label="区划代码" prop="code" align="center"></el-table-column>
			<el-table-column label="层级" prop="regionLevel" align="center">
				<template slot-scope="scope">
					{{scope.row.regionLevel == '1' ? '省级':scope.row.regionLevel == '2' ? '地市':'区县'}}
				</template>
			</el-table-column>
			<el-table-column label="排序号" prop="regionSort" align="center" ></el-table-column>
			<el-table-column label="状态" prop="regionStatus"  align="center">
				<template slot-scope="scope">
					<el-switch
					@change="handleStatusChange(scope.$index, scope.row)"
					:active-value="1"
					:inactive-value="2"
					active-color="#13ce66"
					inactive-color="#ff0000"
					v-model="scope.row.regionStatus">
					</el-switch>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findRegionList, modifyRegionStatus } from '@/api/platform/region'
	export default {
		name: 'region',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				// 数据列表el-table
				dataList: [],
				// 搜索条件
				searchForm: {
					regionCode: '',
					regionName: '',
					parentCode: 0,
				},
			}
		},
		computed: {
			...mapGetters([
				'elementList'
			])
		},
		components: {},
		created() {
			// 初始化获取数据列表
			this.getDateList()
			//初始化按钮权限
			this.permission_add = this.elementList['platform:region:add']
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findRegionList(this.searchForm).then(res => {
					console.log("请求成功打印日志", res)
					this.dataList = res.data.responseData
				})
				this.loading = false
			},
			handleSearch() {
				this.getDateList()
			},
			handleStatusChange(index, row){
				this.$confirm('是否要修改该状态?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						menuId: row.id,
						menuStatus: row.menuStatus
					}
					modifyRegionStatus(data).then(() => {
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
					}).catch(e =>{
						this.$message.error(e.data.responseMessage);
						this.getDateList();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
					this.getDateList();
				});
			},
			load(tree, treeNode, resolve) {
				console.log('asdasd',tree,treeNode,resolve)
				setTimeout(() => {
					resolve([
						{
							id: 31,
							date: '2016-05-01',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1519 弄'
						}, {
							id: 32,
							date: '2016-05-01',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1519 弄'
						}
					])
				}, 1000)
			}
	
		}
	}
</script>
